<template>
  <h2>App组件</h2>
  <p>{{ num }}</p>
  <button @click="update">定义函数更新数据</button>
  <button @click="num++">直接修改数据</button>
  <p>{{ person }}</p>
  <p>{{ person.name }}{{ person.age }}</p>
  <button @click="updateage">更新年龄</button>

  <div>总结：在开发时候：
      传递单个数据使用ref,有多个数据使用reactive
  </div>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  name: "App",
  setup() {
    // 初始化流程触发，相当于beforecreate和created生命周期函数
    console.log("setup()触发", this);

    const num = ref(0);
    // methods
    const update = () => {
      // 注意要变量.value
      num.value += 2;
    };

    const person = reactive({
      name: "haijing",
      age: 38,
    });
    const updateage = () => {
      person.age++;
    };

    // 记得暴露出去外面使用
    return { num, update, person, updateage };
  },
};
</script>

<style>
</style>